<script setup>
import {ref, reactive, computed} from 'vue';
import {MessagePlugin} from 'tdesign-vue-next';
import {applyForActivity} from "@/api/activity.js";
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore()

const form = ref(null);
const activityApply = reactive({
  activityName: '',
  description: '',
  maxNum: 2,
  expirationTime: ref(formatDate(new Date())),
  type: '',

});

const rules = {
  activityName: [
    { required: true, message: '活动名必填', type: 'error' },
  ],
  description: [
    { required: true, message: '活动描述必填', type: 'error' },
  ],
  maxNum: [
    { required: true, message: '人数必填，且最少两人', type: 'error' },
    { number: true, message: '请输入数字', type: 'warning' },
  ],
  type: [
    { required: true, message: '类型必填', type: 'error' },
  ],
};

// 活动类型
const LIST = ['体育','学科竞赛','文化艺术','社会实践','休闲娱乐'];
const options = ref([...LIST]);
const onReset = () => {
  MessagePlugin.success('重置成功');
};

const onSubmit = async () => {
  const res = await applyForActivity(userStore, activityApply.activityName,activityApply.description,activityApply.maxNum,activityApply.expirationTime,activityApply.type);
  if (res.data.data !== true) await MessagePlugin.error("申请失败: "+ res.data.description);
  else {
    await MessagePlugin.success("申请成功")
  }
};

const handleClear = () => {
  form.value.clearValidate();
};

const error = ref(undefined);
const tips = computed(() => {
  if (error.value === 'exceed-maximum') return 'number can not be exceed maximum';
  if (error.value === 'below-minimum') {
    activityApply.maxNum = 2
    return '最少为两人';
  }
  return undefined;
});

const onValidate = (p) => {
  error.value = p.error;
};

// 当前的时间 -------------------------------------------------------------
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>

<template>
  <t-layout style="
      height: 100%;                /* 继承父容器高度 */
    ">
    <t-content
        style="background-color: white; width: 100%; display: flex; align-items: center; justify-content: center">
      <!--  scrollToFirstError="smooth" -->
      <t-form ref="form" :data="activityApply" :rules="rules" @reset="onReset" @submit="onSubmit" style="width: 50%">
        <t-form-item label="活动名" help="输入活动名，申请前请先查询有无类似活动" name="activityName">
          <t-input v-model="activityApply.activityName"></t-input>
        </t-form-item>
        <t-form-item label="活动描述" help="" name="description">
          <t-textarea
              v-model="activityApply.description"
              placeholder="好的描述更容易通过审核"
              name="description"
              :autosize="true"
              :maxcharacter="100"
          />
        </t-form-item>

        <t-form-item label="最大人数" name="maxNum">
          <t-input-number
              :min="2"
              @validate="onValidate"
              :tips="tips"
              v-model="activityApply.maxNum" />
        </t-form-item>
        <t-form-item
            label="截止时间"
            name="expirationTime"
            :rules="[
        { required: true, message: '此项必填' },
      ]"
        >
          <t-date-picker v-model="activityApply.expirationTime" enable-time-picker clearable />
        </t-form-item>

        <t-form-item label="活动类型" name="type" help="选择该活动的类型">
          <t-auto-complete
              v-model="activityApply.type"
              :options="options"
              highlight-keyword
              filterable
              placeholder="类型"
              style="width: 280px"
          />
        </t-form-item>

        <t-form-item>
          <t-space size="small">
            <t-button theme="primary" type="submit">提交</t-button>
            <t-button theme="default" variant="base" type="reset">重置</t-button>
            <t-button theme="default" variant="base" @click="handleClear">清空校验结果</t-button>
          </t-space>
        </t-form-item>
      </t-form>

    </t-content>

  </t-layout>

</template>

<style scoped>

</style>